<template>
  <!--特价商品模块-->
  <div class="bargain">
    <h4><span>新</span>品上架</h4>
    <div>
      <img src="@/assets/img/xingfu.jpg">
      <div class="book-info">
        <a class="title" href="#">记得幸福路的一段</a>
        <p class="price">单价：33.0（元）</p>
        <p class="detail">幸福早来了，如果我们到现在都没发现 那幸福...</p>
        <button class="detail-btn">查看详细信息</button>
      </div>
    </div>
    <div>
      <img src="@/assets/img/qishi.jpg">
      <div class="book-info">
        <a class="title" href="#">《最后的圣殿骑士》</a>
        <p class="price">单价：20.0（元）</p>
        <p class="detail">这是一本引人入胜，情节跌宕而又充满玄幻的...</p>
        <button class="detail-btn">查看详细信息</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "New"
}
</script>

<style scoped>
.bargain{
  width: 100%;
  /*background-color: #b7e0d8;*/
  float: left;
}
.bargain>h4{
  font-weight: lighter;
  font-size: 22px;
  letter-spacing: 10px;
  background-color: #f8f8f8;
  margin-left: 50px;
}
.bargain>h4>span{
  font-size: 24px;
}
.bargain>h4>span{
  font-weight: bold;
}
.bargain>div{
  border-bottom: 1px dotted darkgrey;
  margin-top: 4px;
  width: 100%;
  height: 120px;
  float: left;
}
.bargain>div:nth-of-type(1){
  margin-top: 20px;
}
.bargain>div>.book-info{
  float: left;
}
.title{
  text-decoration: none;
  color: cornflowerblue;
}
.book-info>p{
  text-decoration: none;
  font-size: 12px;
  margin: 8px 0;
}
.detail-btn{
  width: 100px;
  margin-top: 8px;
}
.bargain>div>img{
  width: 100px;
  height: 120px;
  float: left;
  margin: 1px 20px;
}

</style>
